<template>
  <div :class="{ 'active': $route.path==link }" style="flex: 1;text-align: center" @click="$router.push(link)">
    <div class="img_style">
      <slot name="icon" v-if="$route.path!=link"></slot>
      <slot name="icon-active" v-if="$route.path==link"></slot>
    </div>
    <div class="text_style" :style="{color:$route.path==link?'#333333':'#dbdbdb'}">
      <slot name="label"></slot>
    </div>
  </div>
</template>

<script>
    export default {
      name: "MyTabbarItem",
      props:{
        link:String,
      }
    }
</script>

<style scoped>
.active{
  /*background: red;*/
}
.img_style{
  padding-top: 5px;
  display: inline-block;
  width: 27px;
  height: 27px;
}
.img_style img{
  width: 100%;
  height: 100%;
}
.text_style{
  padding-bottom: 5px;
  text-align: center;
  font-size: 10px;
  line-height: 1.8;
}
</style>
